<template>
  <div class="p-6 space-y-6 relative overflow-hidden">
    <!-- 动态背景粒子 -->
    <div class="absolute inset-0 pointer-events-none">
      <div 
        v-for="i in 50" 
        :key="i" 
        class="absolute w-1 h-1 bg-electric-500/20 rounded-full animate-float"
        :style="getParticleStyle(i)"
      ></div>
    </div>
    
    <!-- 页面标题 -->
    <div class="text-center mb-8 relative z-10">
      <h1 class="text-3xl font-bold text-white mb-2 animate-glow animate-slideInDown">政策推演系统</h1>
      <p class="text-electric-500 animate-slideInUp animate-delay-300">智能政策影响分析与未来趋势预测</p>
    </div>

    <!-- 控制面板 -->
    <div class="glass-card p-6 mb-6 animate-slideInLeft animate-delay-500 hover:scale-105 transition-all duration-300">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- 政策选择 -->
        <div class="space-y-2">
          <label class="text-white font-medium">目标政策</label>
          <select v-model="selectedPolicy" class="w-full px-4 py-3 cyber-select" @change="loadPolicyData">
            <option value="">选择政策</option>
            <option v-for="policy in availablePolicies" :key="policy.id" :value="policy.id">
              {{ policy.name }}
            </option>
          </select>
        </div>

        <!-- 时间范围 -->
        <div class="space-y-2">
          <label class="text-white font-medium">推演时间</label>
          <select v-model="timeRange" class="w-full px-4 py-3 cyber-select" @change="updateSimulation">
            <option value="6">6个月</option>
            <option value="12">1年</option>
            <option value="24">2年</option>
            <option value="60">5年</option>
          </select>
        </div>

        <!-- 推演模式 -->
        <div class="space-y-2">
          <label class="text-white font-medium">分析模式</label>
          <select v-model="simulationMode" class="w-full px-4 py-3 cyber-select" @change="updateSimulation">
            <option value="conservative">保守模式</option>
            <option value="moderate">适中模式</option>
            <option value="aggressive">积极模式</option>
          </select>
        </div>

        <!-- 开始推演 -->
        <div class="space-y-2">
          <label class="text-white font-medium">操作</label>
          <button 
            @click="startSimulation" 
            :disabled="!selectedPolicy || isSimulating"
            class="w-full cyber-button disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <span v-if="isSimulating" class="flex items-center justify-center space-x-2">
              <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
              <span>推演中...</span>
            </span>
            <span v-else>开始推演</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 推演结果统计 -->
    <div v-if="simulationResults" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div 
        v-for="(stat, index) in statsConfig" 
        :key="stat.key"
        class="glass-card p-4 text-center hover:scale-105 transition-all duration-300 cursor-pointer"
        :class="{ 'ring-2 ring-electric-500': stat.highlight }"
        @click="highlightStat(stat.key)"
      >
        <div class="relative">
          <div class="text-2xl font-bold mb-2" :class="stat.color">
            <span v-if="stat.key === 'risk'">{{ stat.value }}</span>
            <span v-else>
              <animated-counter :target="stat.value || 0" :duration="1000" />
            </span>
            <span v-if="stat.suffix">{{ stat.suffix }}</span>
          </div>
          <div class="text-electric-500 text-sm font-medium">{{ stat.label }}</div>
          <div class="absolute -top-2 -right-2 w-3 h-3 bg-electric-500 rounded-full" v-if="stat.highlight"></div>
        </div>
      </div>
    </div>

    <!-- 可视化图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 政策影响时间轴 -->
      <div class="glass-card p-6 animate-slideInLeft animate-delay-700 hover:shadow-2xl hover:shadow-electric-500/20 transition-all duration-500">
        <h3 class="text-xl font-bold text-white mb-4 flex items-center">
          <TrendingUp class="w-5 h-5 mr-2 text-electric-500" />
          政策影响时间轴
        </h3>
        <div class="h-80 relative">
          <div v-if="isSimulating" class="absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg z-10">
            <div class="text-center">
              <div class="w-16 h-16 border-4 border-electric-500 border-t-transparent rounded-full animate-spin mb-4"></div>
              <div class="text-white">正在生成时间轴...</div>
            </div>
          </div>
          <v-chart 
            :option="timelineOption" 
            class="w-full h-full chart-animate"
            :loading="false"
          />
        </div>
      </div>

      <!-- 影响因素分析 -->
      <div class="glass-card p-6 animate-slideInRight animate-delay-800 hover:shadow-2xl hover:shadow-blue-500/20 transition-all duration-500">
        <h3 class="text-xl font-bold text-white mb-4 flex items-center">
          <Target class="w-5 h-5 mr-2 text-electric-500" />
          影响因素分析
        </h3>
        <div class="h-80 relative">
          <div v-if="isSimulating" class="absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg z-10">
            <div class="text-center">
              <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
              <div class="text-white">正在分析因素...</div>
            </div>
          </div>
          <v-chart 
            :option="factorAnalysisOption" 
            class="w-full h-full chart-animate"
            :loading="false"
          />
        </div>
      </div>

      <!-- 政策效果预测 -->
      <div class="glass-card p-6 animate-slideInLeft animate-delay-900 hover:shadow-2xl hover:shadow-green-500/20 transition-all duration-500">
        <h3 class="text-xl font-bold text-white mb-4 flex items-center">
          <BarChart3 class="w-5 h-5 mr-2 text-electric-500" />
          政策效果预测
        </h3>
        <div class="h-80 relative">
          <div v-if="isSimulating" class="absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg z-10">
            <div class="text-center">
              <div class="w-16 h-16 border-4 border-green-500 border-t-transparent rounded-full animate-spin mb-4"></div>
              <div class="text-white">正在预测效果...</div>
            </div>
          </div>
          <v-chart 
            :option="effectPredictionOption" 
            class="w-full h-full chart-animate"
            :loading="false"
          />
        </div>
      </div>

      <!-- 风险评估矩阵 -->
      <div class="glass-card p-6 animate-slideInRight animate-delay-1000 hover:shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500">
        <h3 class="text-xl font-bold text-white mb-4 flex items-center">
          <AlertTriangle class="w-5 h-5 mr-2 text-electric-500" />
          风险评估矩阵
        </h3>
        <div class="h-80 relative">
          <div v-if="isSimulating" class="absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg z-10">
            <div class="text-center">
              <div class="w-16 h-16 border-4 border-yellow-500 border-t-transparent rounded-full animate-spin mb-4"></div>
              <div class="text-white">正在评估风险...</div>
            </div>
          </div>
          <v-chart 
            :option="riskMatrixOption" 
            class="w-full h-full chart-animate"
            :loading="false"
          />
        </div>
      </div>
    </div>

    <!-- 政策推演情景对比 -->
    <div class="glass-card p-6 animate-slideInUp animate-delay-1200 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-500">
      <h3 class="text-xl font-bold text-white mb-4 flex items-center">
        <GitCompare class="w-5 h-5 mr-2 text-electric-500" />
        不同情景对比分析
      </h3>
      <div class="h-96 relative">
        <div v-if="isSimulating" class="absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg z-10">
          <div class="text-center">
            <div class="w-20 h-20 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mb-4"></div>
            <div class="text-white">正在对比情景...</div>
          </div>
        </div>
        <v-chart 
          :option="scenarioComparisonOption" 
          class="w-full h-full chart-animate"
          :loading="false"
        />
      </div>
    </div>

    <!-- 推演报告 -->
    <transition name="fade-slide-up" appear>
      <div v-if="simulationResults" class="glass-card p-6 animate-slideInUp animate-delay-1400 hover:shadow-2xl hover:shadow-electric-500/30 transition-all duration-500">
        <h3 class="text-xl font-bold text-white mb-4 flex items-center">
          <FileText class="w-5 h-5 mr-2 text-electric-500" />
          推演分析报告
        </h3>
        <div class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-3">
              <h4 class="font-semibold text-electric-500">主要发现</h4>
              <ul class="space-y-2 text-white/80">
                <li 
                  v-for="(finding, index) in simulationResults.keyFindings" 
                  :key="finding" 
                  class="flex items-start transition-all duration-300 hover:bg-white/5 rounded-lg p-2"
                >
                  <CheckCircle class="w-4 h-4 text-green-400 mr-2 mt-0.5 flex-shrink-0" />
                  <span>{{ finding }}</span>
                </li>
              </ul>
            </div>
            <div class="space-y-3">
              <h4 class="font-semibold text-electric-500">建议措施</h4>
              <ul class="space-y-2 text-white/80">
                <li 
                  v-for="(recommendation, index) in simulationResults.recommendations" 
                  :key="recommendation" 
                  class="flex items-start transition-all duration-300 hover:bg-white/5 rounded-lg p-2"
                >
                  <Lightbulb class="w-4 h-4 text-yellow-400 mr-2 mt-0.5 flex-shrink-0" />
                  <span>{{ recommendation }}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="flex justify-end space-x-3 mt-6">
            <button class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-500 hover:scale-105 transition-all duration-300 flex items-center space-x-2">
              <span>📄</span>
              <span>导出报告</span>
            </button>
            <button class="px-4 py-2 bg-electric-500 text-white rounded-lg hover:bg-electric-600 hover:scale-105 transition-all duration-300 flex items-center space-x-2">
              <span>💾</span>
              <span>保存推演</span>
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart, HeatmapChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  VisualMapComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  TrendingUp, 
  Target, 
  BarChart3, 
  AlertTriangle, 
  GitCompare, 
  FileText, 
  CheckCircle, 
  Lightbulb 
} from 'lucide-vue-next'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  HeatmapChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  VisualMapComponent
])

// 数字动画组件
const AnimatedCounter = {
  props: {
    target: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      displayValue: 0
    }
  },
  mounted() {
    this.animateValue()
  },
  watch: {
    target() {
      this.animateValue()
    }
  },
  methods: {
    animateValue() {
      const startTime = Date.now()
      const startValue = this.displayValue
      const endValue = this.target
      const duration = this.duration

      const animate = () => {
        const now = Date.now()
        const elapsed = now - startTime
        const progress = Math.min(elapsed / duration, 1)
        
        // 使用缓动函数
        const easeOutQuart = 1 - Math.pow(1 - progress, 4)
        this.displayValue = Math.round(startValue + (endValue - startValue) * easeOutQuart)
        
        if (progress < 1) {
          requestAnimationFrame(animate)
        }
      }
      
      animate()
    }
  },
  template: `<span>{{ displayValue }}</span>`
}

export default {
  name: 'PolicySimulation',
  components: {
    VChart,
    TrendingUp,
    Target,
    BarChart3,
    AlertTriangle,
    GitCompare,
    FileText,
    CheckCircle,
    Lightbulb,
    AnimatedCounter
  },
  setup() {
    // 响应式数据
    const selectedPolicy = ref('')
    const timeRange = ref('12')
    const simulationMode = ref('moderate')
    const isSimulating = ref(false)
    const simulationResults = ref(null)
    const highlightedStat = ref(null)
    
    // 统计配置
    const statsConfig = computed(() => {
      if (!simulationResults.value) return []
      
      return [
        {
          key: 'impact',
          label: '预期影响指数',
          value: simulationResults.value.impactScore,
          suffix: '%',
          color: 'text-green-400',
          highlight: highlightedStat.value === 'impact'
        },
        {
          key: 'feasibility',
          label: '可行性评分',
          value: simulationResults.value.feasibilityScore,
          suffix: '%',
          color: 'text-blue-400',
          highlight: highlightedStat.value === 'feasibility'
        },
        {
          key: 'risk',
          label: '风险等级',
          value: simulationResults.value.riskLevel,
          suffix: '',
          color: 'text-yellow-400',
          highlight: highlightedStat.value === 'risk'
        },
        {
          key: 'time',
          label: '预计生效时间',
          value: simulationResults.value.timeToEffect,
          suffix: '个月',
          color: 'text-purple-400',
          highlight: highlightedStat.value === 'time'
        }
      ]
    })
    
    // 可用政策列表
    const availablePolicies = ref([
      { id: 'tax_reform_2024', name: '2024年税收优化政策', category: '财税政策', complexity: 'medium' },
      { id: 'trade_facilitation', name: '跨境贸易便利化措施', category: '贸易政策', complexity: 'high' },
      { id: 'digital_economy', name: '数字经济发展政策', category: '产业政策', complexity: 'high' },
      { id: 'green_finance', name: '绿色金融支持政策', category: '金融政策', complexity: 'medium' },
      { id: 'innovation_incentive', name: '科技创新激励政策', category: '科技政策', complexity: 'low' },
      { id: 'carbon_neutral', name: '碳中和行动方案', category: '环保政策', complexity: 'high' },
      { id: 'talent_policy', name: '人才引进优惠政策', category: '人才政策', complexity: 'low' },
      { id: 'manufacturing_upgrade', name: '制造业转型升级政策', category: '产业政策', complexity: 'medium' }
    ])

    // 时间轴图表配置
    const timelineOption = computed(() => ({
      title: {
        text: '政策影响时间轴',
        textStyle: { color: '#fff', fontSize: 14 }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        textStyle: { color: '#fff' }
      },
      legend: {
        data: ['影响程度', '实施进度', '风险指数'],
        textStyle: { color: '#fff' }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: generateTimePoints(),
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } },
        splitLine: { lineStyle: { color: '#4F46E5', opacity: 0.3 } }
      },
      series: [
        {
          name: '影响程度',
          type: 'line',
          data: generateImpactData(),
          smooth: true,
          lineStyle: { color: '#10B981' },
          itemStyle: { color: '#10B981' },
          areaStyle: { color: 'rgba(16, 185, 129, 0.1)' }
        },
        {
          name: '实施进度',
          type: 'line',
          data: generateProgressData(),
          smooth: true,
          lineStyle: { color: '#3B82F6' },
          itemStyle: { color: '#3B82F6' },
          areaStyle: { color: 'rgba(59, 130, 246, 0.1)' }
        },
        {
          name: '风险指数',
          type: 'line',
          data: generateRiskData(),
          smooth: true,
          lineStyle: { color: '#F59E0B' },
          itemStyle: { color: '#F59E0B' },
          areaStyle: { color: 'rgba(245, 158, 11, 0.1)' }
        }
      ]
    }))

    // 影响因素分析图表配置
    const factorAnalysisOption = computed(() => ({
      title: {
        text: '关键影响因素',
        textStyle: { color: '#fff', fontSize: 14 }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        textStyle: { color: '#fff' }
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        textStyle: { color: '#fff' }
      },
      series: [
        {
          name: '影响因素',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold',
              color: '#fff'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '经济环境', itemStyle: { color: '#10B981' } },
            { value: 735, name: '政策环境', itemStyle: { color: '#3B82F6' } },
            { value: 580, name: '技术因素', itemStyle: { color: '#8B5CF6' } },
            { value: 484, name: '社会因素', itemStyle: { color: '#F59E0B' } },
            { value: 300, name: '法律法规', itemStyle: { color: '#EF4444' } }
          ]
        }
      ]
    }))

    // 政策效果预测图表配置
    const effectPredictionOption = computed(() => ({
      title: {
        text: '政策效果预测',
        textStyle: { color: '#fff', fontSize: 14 }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        textStyle: { color: '#fff' }
      },
      legend: {
        data: ['经济效益', '社会效益', '环境效益'],
        textStyle: { color: '#fff' }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['第1季度', '第2季度', '第3季度', '第4季度', '第5季度', '第6季度'],
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } },
        splitLine: { lineStyle: { color: '#4F46E5', opacity: 0.3 } }
      },
      series: [
        {
          name: '经济效益',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230],
          itemStyle: { color: '#10B981' }
        },
        {
          name: '社会效益',
          type: 'bar',
          data: [220, 182, 191, 234, 290, 330],
          itemStyle: { color: '#3B82F6' }
        },
        {
          name: '环境效益',
          type: 'bar',
          data: [150, 232, 201, 154, 190, 330],
          itemStyle: { color: '#8B5CF6' }
        }
      ]
    }))

    // 风险评估矩阵图表配置
    const riskMatrixOption = computed(() => ({
      title: {
        text: '风险评估矩阵',
        textStyle: { color: '#fff', fontSize: 14 }
      },
      tooltip: {
        position: 'top',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        textStyle: { color: '#fff' }
      },
      grid: {
        height: '50%',
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: ['低概率', '中概率', '高概率'],
        splitArea: {
          show: true
        },
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } }
      },
      yAxis: {
        type: 'category',
        data: ['低影响', '中影响', '高影响'],
        splitArea: {
          show: true
        },
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } }
      },
      visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%',
        textStyle: { color: '#fff' },
        inRange: {
          color: ['#10B981', '#F59E0B', '#EF4444']
        }
      },
      series: [
        {
          name: '风险等级',
          type: 'heatmap',
          data: generateRiskMatrix(),
          label: {
            show: true,
            color: '#fff'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }))

    // 情景对比分析图表配置
    const scenarioComparisonOption = computed(() => ({
      title: {
        text: '不同情景对比分析',
        textStyle: { color: '#fff', fontSize: 14 }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        textStyle: { color: '#fff' }
      },
      legend: {
        data: ['保守情景', '适中情景', '积极情景'],
        textStyle: { color: '#fff' }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: generateScenarioTimePoints(),
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F46E5' } },
        splitLine: { lineStyle: { color: '#4F46E5', opacity: 0.3 } }
      },
      series: [
        {
          name: '保守情景',
          type: 'line',
          data: generateConservativeData(),
          smooth: true,
          lineStyle: { color: '#F59E0B' },
          itemStyle: { color: '#F59E0B' },
          areaStyle: { color: 'rgba(245, 158, 11, 0.1)' }
        },
        {
          name: '适中情景',
          type: 'line',
          data: generateModerateData(),
          smooth: true,
          lineStyle: { color: '#3B82F6' },
          itemStyle: { color: '#3B82F6' },
          areaStyle: { color: 'rgba(59, 130, 246, 0.1)' }
        },
        {
          name: '积极情景',
          type: 'line',
          data: generateAggressiveData(),
          smooth: true,
          lineStyle: { color: '#10B981' },
          itemStyle: { color: '#10B981' },
          areaStyle: { color: 'rgba(16, 185, 129, 0.1)' }
        }
      ]
    }))

    // 生成风险矩阵数据
    const generateRiskMatrix = () => {
      const data = []
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          data.push([j, i, Math.round(Math.random() * 9) + 1])
        }
      }
      return data
    }

    // 生成情景时间点
    const generateScenarioTimePoints = () => {
      const points = []
      for (let i = 0; i < 12; i++) {
        points.push(`${i + 1}月`)
      }
      return points
    }

    // 生成保守情景数据
    const generateConservativeData = () => {
      const data = []
      for (let i = 0; i < 12; i++) {
        data.push(20 + i * 2 + Math.random() * 5)
      }
      return data
    }

    // 生成适中情景数据
    const generateModerateData = () => {
      const data = []
      for (let i = 0; i < 12; i++) {
        data.push(30 + i * 4 + Math.random() * 8)
      }
      return data
    }

    // 生成积极情景数据
    const generateAggressiveData = () => {
      const data = []
      for (let i = 0; i < 12; i++) {
        data.push(40 + i * 6 + Math.random() * 10)
      }
            return data
    }
    
    // 生成时间点数据
    const generateTimePoints = () => {
      const months = parseInt(timeRange.value)
      const points = []
      for (let i = 0; i <= months; i += Math.max(1, Math.floor(months / 12))) {
        points.push(`${i}个月`)
      }
      return points
    }
    
    // 生成影响数据
    const generateImpactData = () => {
      const points = generateTimePoints()
      const data = []
      
      for (let i = 0; i < points.length; i++) {
        const progress = i / (points.length - 1)
        const value = Math.round(20 + progress * 60 + Math.random() * 20)
        data.push(value)
      }
      return data
    }
    
    // 生成进度数据
    const generateProgressData = () => {
      const points = generateTimePoints()
      const data = []
      
      for (let i = 0; i < points.length; i++) {
        const progress = i / (points.length - 1)
        const value = Math.round(progress * 100 + Math.random() * 10)
        data.push(Math.min(100, value))
      }
      return data
    }
    
    // 生成风险数据
    const generateRiskData = () => {
      const points = generateTimePoints()
      const data = []
      
      for (let i = 0; i < points.length; i++) {
        const progress = i / (points.length - 1)
        const value = Math.round(80 - progress * 40 + Math.random() * 20)
        data.push(Math.max(10, value))
      }
      return data
    }
    
    // 生成粒子样式
    const getParticleStyle = (index) => {
      const size = Math.random() * 3 + 1
      const duration = Math.random() * 20 + 10
      const delay = Math.random() * 5
      return {
        width: `${size}px`,
        height: `${size}px`,
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        animationDuration: `${duration}s`,
        animationDelay: `${delay}s`
      }
    }
    
    // 获取风险等级显示值
    const getRiskDisplayValue = (riskLevel) => {
      if (typeof riskLevel === 'string') return riskLevel
      const riskLabels = ['低', '中', '高']
      return riskLabels[riskLevel - 1] || '未知'
    }
    
    // 根据政策和模式计算影响
    const getPolicyImpact = (policyId, mode) => {
      const policyEffects = {
        'tax_reform_2024': { impact: 15, feasibility: 12, speed: 2, description: '税收政策具有较强的直接影响力' },
        'trade_facilitation': { impact: 12, feasibility: 8, speed: 1, description: '贸易便利化需要多方协调' },
        'digital_economy': { impact: 18, feasibility: 6, speed: 0, description: '数字经济具有高影响但实施复杂' },
        'green_finance': { impact: 10, feasibility: 14, speed: 1, description: '绿色金融政策可操作性强' },
        'innovation_incentive': { impact: 20, feasibility: 8, speed: 0, description: '创新激励政策影响深远' },
        'carbon_neutral': { impact: 25, feasibility: 4, speed: -1, description: '碳中和政策影响巨大但实施困难' },
        'talent_policy': { impact: 12, feasibility: 15, speed: 2, description: '人才政策执行相对简单' },
        'manufacturing_upgrade': { impact: 16, feasibility: 7, speed: 0, description: '制造业升级需要长期投入' }
      }
      
      const modeMultipliers = {
        'conservative': { impact: 0.8, feasibility: 1.3, speed: 0.5, risk: -1 },
        'moderate': { impact: 1.0, feasibility: 1.0, speed: 1.0, risk: 0 },
        'aggressive': { impact: 1.4, feasibility: 0.7, speed: 1.8, risk: 1 }
      }
      
      const policy = policyEffects[policyId] || { impact: 12, feasibility: 10, speed: 1, description: '标准政策效应' }
      const multiplier = modeMultipliers[mode] || modeMultipliers['moderate']
      
      return {
        impactBonus: Math.round(policy.impact * multiplier.impact),
        feasibilityBonus: Math.round(policy.feasibility * multiplier.feasibility),
        speedBonus: Math.round(policy.speed * multiplier.speed),
        riskAdjustment: multiplier.risk,
        description: policy.description
      }
    }
    

    
    // 政策数据加载
    const loadPolicyData = () => {
      if (selectedPolicy.value) {
        console.log(`Loading policy data for: ${selectedPolicy.value}`)
        // 只清除高亮状态，保持演示数据直到用户点击推演
        highlightedStat.value = null
      }
    }
    
    // 更新推演配置
    const updateSimulation = () => {
      console.log(`Updated simulation: ${simulationMode.value}, ${timeRange.value} months`)
    }
    
    // 高亮统计项
    const highlightStat = (statKey) => {
      highlightedStat.value = statKey
      setTimeout(() => {
        highlightedStat.value = null
      }, 3000)
    }
    
    // 开始推演
    const startSimulation = async () => {
      if (!selectedPolicy.value) return
      
      isSimulating.value = true
      highlightedStat.value = null
      
      try {
        // 模拟推演过程 - 增加更多阶段
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 阶段1：数据收集
        console.log('📊 正在收集政策数据...')
        await new Promise(resolve => setTimeout(resolve, 800))
        
        // 阶段2：影响分析
        console.log('🔍 正在分析影响因素...')
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 阶段3：风险评估
        console.log('⚠️ 正在评估风险等级...')
        await new Promise(resolve => setTimeout(resolve, 800))
        
        // 阶段4：结果生成
        console.log('✅ 正在生成推演结果...')
        await new Promise(resolve => setTimeout(resolve, 600))
        
        // 生成推演结果
        const riskLevels = ['低', '中', '高']
        let riskIndex = Math.floor(Math.random() * 3)
        const impactScore = Math.round(Math.random() * 30 + 60)
        const feasibilityScore = Math.round(Math.random() * 25 + 65)
        const timeToEffect = Math.round(Math.random() * 8 + 2)
        
        // 根据选择的政策和模式调整结果
        const policyImpact = getPolicyImpact(selectedPolicy.value, simulationMode.value)
        
        // 调整风险等级
        riskIndex = Math.max(0, Math.min(2, riskIndex + policyImpact.riskAdjustment))
        const riskLevel = riskLevels[riskIndex]
        
        const finalImpactScore = Math.min(100, Math.max(0, impactScore + policyImpact.impactBonus))
        const finalFeasibilityScore = Math.min(100, Math.max(0, feasibilityScore + policyImpact.feasibilityBonus))
        const finalTimeToEffect = Math.max(1, timeToEffect - policyImpact.speedBonus)
        
        // 获取选中政策的信息
        const selectedPolicyInfo = availablePolicies.value.find(p => p.id === selectedPolicy.value)
        const policyName = selectedPolicyInfo?.name || '所选政策'
        const policyCategory = selectedPolicyInfo?.category || '政策'
        
        simulationResults.value = {
          impactScore: finalImpactScore,
          feasibilityScore: finalFeasibilityScore,
          riskLevel: riskLevel,
          timeToEffect: finalTimeToEffect,
          keyFindings: [
            `${policyName}预计在第${finalTimeToEffect}个月开始显现效果`,
            `${policyImpact.description}，预期影响指数${finalImpactScore}%`,
            `作为${policyCategory}，该政策的可行性评分为${finalFeasibilityScore}%`,
            `采用${simulationMode.value === 'conservative' ? '保守' : simulationMode.value === 'moderate' ? '适中' : '积极'}推演模式，综合风险等级评定为${riskLevel}`,
            '政策实施效果将受到宏观经济环境、配套措施完善程度等多重因素影响'
          ],
          recommendations: [
            simulationMode.value === 'aggressive' ? '建议采用激进策略，设立明确的时间节点和里程碑' : '建议稳步推进，确保政策实施的稳定性和可持续性',
            `针对${policyCategory}特点，建议加强相关部门间的协调配合`,
            finalFeasibilityScore > 80 ? '可行性较高，建议优先推进实施' : '需要进一步完善实施方案，降低执行难度',
            riskLevel === '高' ? '高风险项目，建议制定详细的风险应对预案' : '风险可控，但仍需建立监测机制',
            '建立政策效果评估体系，定期跟踪政策实施进展和效果'
          ]
        }
        
        // 依次高亮每个统计项
        setTimeout(() => highlightStat('impact'), 200)
        setTimeout(() => highlightStat('feasibility'), 800)
        setTimeout(() => highlightStat('risk'), 1400)
        setTimeout(() => highlightStat('time'), 2000)
        
      } catch (error) {
        console.error('推演过程出错:', error)
      } finally {
        isSimulating.value = false
      }
    }

    // 初始化示例数据
    const initializeDemo = () => {
      simulationResults.value = {
        impactScore: 85,
        feasibilityScore: 78,
        riskLevel: '中',
        timeToEffect: 6,
        keyFindings: [
          '政策推演系统已准备就绪，可开始分析',
          '选择政策并设置推演参数以获得详细分析结果',
          '系统将根据政策类型和推演模式智能调整预测结果',
          '推演完成后将提供详细的风险评估和实施建议',
          '支持多种政策类型的对比分析和情景模拟'
        ],
        recommendations: [
          '请先选择要分析的政策类型',
          '建议根据实际情况选择合适的推演模式',
          '关注推演结果中的关键风险指标',
          '参考系统建议制定具体的实施方案',
          '定期更新推演参数以获得最新的分析结果'
        ]
      }
    }

    // 组件挂载时初始化
    onMounted(() => {
      nextTick(() => {
        initializeDemo()
      })
    })

    return {
      selectedPolicy,
      timeRange,
      simulationMode,
      isSimulating,
      simulationResults,
      availablePolicies,
      statsConfig,
      highlightedStat,
      timelineOption,
      factorAnalysisOption,
      effectPredictionOption,
      riskMatrixOption,
      scenarioComparisonOption,
      loadPolicyData,
      updateSimulation,
      startSimulation,
      highlightStat,
      getParticleStyle,
      getRiskDisplayValue,
      getPolicyImpact,
      generateTimePoints,
      generateImpactData,
      generateProgressData,
      generateRiskData,
      generateRiskMatrix,
      generateScenarioTimePoints,
      generateConservativeData,
      generateModerateData,
      generateAggressiveData,
      initializeDemo
    }
  }
}
</script>

<style scoped>
/* 基础动画 */
.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #4F46E5, 0 0 10px #4F46E5, 0 0 15px #4F46E5;
  }
  to {
    text-shadow: 0 0 10px #4F46E5, 0 0 20px #4F46E5, 0 0 30px #4F46E5;
  }
}

/* 粒子动画 */
.animate-float {
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 滑入动画 */
.animate-slideInDown {
  animation: slideInDown 0.8s ease-out;
}

.animate-slideInUp {
  animation: slideInUp 0.8s ease-out;
}

.animate-slideInLeft {
  animation: slideInLeft 0.8s ease-out;
}

.animate-slideInRight {
  animation: slideInRight 0.8s ease-out;
}

.animate-bounceIn {
  animation: bounceIn 0.8s ease-out;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 延迟动画 */
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }
.animate-delay-600 { animation-delay: 600ms; }
.animate-delay-700 { animation-delay: 700ms; }
.animate-delay-800 { animation-delay: 800ms; }
.animate-delay-900 { animation-delay: 900ms; }
.animate-delay-1000 { animation-delay: 1000ms; }

/* Vue过渡动画 */
.fade-slide-up-enter-active,
.fade-slide-up-leave-active {
  transition: all 0.5s ease;
}

.fade-slide-up-enter-from {
  transform: translateY(30px);
  opacity: 0;
}

.fade-slide-up-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}

/* 图表动画 */
.chart-animate {
  animation: chartFadeIn 1s ease-out;
}

@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 悬停效果 */
.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.cyber-glow {
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.cyber-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.5);
  border-radius: 8px;
  color: white;
  transition: all 0.3s;
}

.cyber-input:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  outline: none;
}

/* Select专用样式 */
.cyber-select {
  background: rgba(26, 37, 61, 0.95);
  border: 1px solid rgba(0, 245, 255, 0.5);
  border-radius: 8px;
  color: #ffffff;
  font-weight: 500;
  transition: all 0.3s;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2300f5ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 添加缺失的颜色类 */
.bg-electric-500 {
  background-color: #00f5ff;
}

.bg-electric-600 {
  background-color: #00d9ff;
}

.text-electric-500 {
  color: #00f5ff;
}

/* 其他按钮样式 */
.cyber-button {
  background: linear-gradient(135deg, #0073e6 0%, #00f5ff 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 115, 230, 0.4);
}

.cyber-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 245, 255, 0.6);
}

.cyber-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Select样式继续 */
.cyber-select:focus {
  border-color: #00f5ff;
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.6);
  outline: none;
  background: rgba(26, 37, 61, 1);
}

.cyber-select:hover {
  border-color: rgba(0, 245, 255, 0.7);
  background: rgba(26, 37, 61, 1);
}

.cyber-select option {
  background: rgba(26, 37, 61, 0.98);
  color: #ffffff;
  padding: 10px 15px;
  border: none;
  font-weight: 500;
}

.cyber-select option:hover {
  background: rgba(0, 245, 255, 0.15);
  color: #00f5ff;
}

.cyber-select option:checked {
  background: rgba(0, 245, 255, 0.3);
  color: #00f5ff;
  font-weight: 600;
}

/* 修复在不同浏览器下的选择框样式 */
.cyber-select::-ms-expand {
  display: none;
}

/* Firefox下拉箭头修复 */
.cyber-select {
  -moz-appearance: none;
}

/* 确保文本在所有情况下都可读 */
.text-white {
  color: #ffffff !important;
}

/* 改善推演报告的样式 */
.simulation-report {
  background: rgba(26, 37, 61, 0.8);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
}

.simulation-report h3 {
  color: #00f5ff;
  margin-bottom: 1rem;
  font-weight: 600;
}

.simulation-report ul {
  list-style: none;
  padding: 0;
}

.simulation-report li {
  color: #ffffff;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 245, 255, 0.1);
}

.simulation-report li:last-child {
  border-bottom: none;
}

.simulation-report li::before {
  content: "▸";
  color: #00f5ff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-right: 0.5rem;
}

/* 改善加载状态的样式 */
.loading-text {
  color: #00f5ff;
  font-weight: 500;
  text-align: center;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.cyber-button {
  background: linear-gradient(45deg, #4F46E5, #7C3AED);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cyber-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.cyber-button:hover:not(:disabled)::before {
  left: 100%;
}

.cyber-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}

.cyber-button-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.5);
  border-radius: 8px;
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  transition: all 0.3s;
  cursor: pointer;
}

.cyber-button-secondary:hover {
  background: rgba(79, 70, 229, 0.2);
  border-color: #4F46E5;
  transform: translateY(-2px);
}

/* 脉冲动画 */
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 旋转动画 */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 弹跳动画 */
.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(-5px);
  }
  90% {
    transform: translateY(-2px);
  }
}

/* 呼吸动画 */
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .animate-slideInLeft,
  .animate-slideInRight {
    animation: slideInUp 0.8s ease-out;
  }
}
</style> 